<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 左右布局-方式1通过栅格 -->
        <!-- <el-row>
          <el-col :span="12">左</el-col>
          <el-col :span="12">右</el-col>
        </el-row> -->
        <!-- 左右布局-方式2通过flex -->
        <!-- 解决右边靠边，再在右边套一层flex -->
        <tree-node :data="companyInfo">
          <el-dropdown-item
            :disabled="!hasPermission('add-dept')"
            @click.native="onAdd(companyInfo)"
          >添加子部门</el-dropdown-item>
        </tree-node>
        <el-tree :data="list" :props="{label:'name'}" default-expand-all>
          <!-- 使用作用域插槽自定义树显示内容 -->
          <!-- slot-scope是vue2.6之前写法 -->
          <!-- data就是一行的数据,试题el-tree给提供的 -->
          <!-- <div slot-scope="{ data }">
              {{ data.name }}-{{ data.manager }}
              </div> -->
          <!-- v-slot是vue2.6/3之后添加写法 -->
          <!-- 注意-v-slot只能用到<template></template> -->
          <template v-slot="{data}">
            <tree-node :data="data">
              <el-dropdown-item
                :disabled="!hasPermission('add-dept')"
                @click.native="onAdd(data)"
              >添加子部门</el-dropdown-item>
              <el-dropdown-item @click.native="onUpdate(data.id)">编辑部门</el-dropdown-item>
              <el-dropdown-item @click.native="onDel(data.id)">删除部门</el-dropdown-item>
            </tree-node>
          </template>
        </el-tree>
      </el-card>
    </div>
    <add-dept ref="addRef" :show-dialog.sync="showDialog" :node="currentNode" @success="departmentsFn()"></add-dept>
  </div>
</template>

<script>
import TreeNode from './components/tree-node.vue'
import { getDepartments, delDepartments, getDepartmentsByid } from '../../api/departments.js'
import { translateToTree } from '@/utils'
import AddDept from './components/add-dept.vue'
export default {
  name: 'DepartmentsPage',
  components: {
    TreeNode,
    AddDept
  },
  data() {
    return {
      list: [],
      companyInfo: { name: '', manager: '负责人', id: '' },
      showDialog: false,
      currentNode: {}// 定义当前部门数据
    }
  },
  created() {},
  mounted() {
    this.departmentsFn()
  },
  methods: {
    async departmentsFn() {
      try {
        const loading = this.$loading()// 编辑后提示加载
        const res = await getDepartments()
        this.companyInfo.name = res.companyName
        this.list = translateToTree(res.depts, '')
        loading.close()
      } catch (error) {
        console.log(error)
      }
    },
    onAdd(data) {
      this.showDialog = true
      this.currentNode = data// 保存当前部门
    },
    async onUpdate(id) {
      const res = await getDepartmentsByid(id)
      this.showDialog = true
      // 法一：通过v-bind
      // this.currentNode = res
      // 法二：通过ref
      this.$refs.addRef.form = res
    },
    onDel(id) {
      console.log('删除')
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        // 发请求
        await delDepartments(id)
        // 提示成功
        this.$message.success('曹操成功')
        // 调用列表
        this.departmentsFn()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
.el-dropdown {
  margin-left: 5px;
}
</style>
